import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
import { useMenuStore } from '@/stores/menu';
import { useRoute, onBeforeRouteUpdate, useRouter } from 'vue-router';
import { getTabList, setTabList } from '@/composables/tag-list';



export function useTagListFunc() {
    const router = useRouter()
    const route = useRoute()
    const menuStore = useMenuStore()
    //当前被选中的tab
    const activeTab = ref(route.path)

    const tabList = ref([{
        title: '仪表盘',
        path: "/admin/index"
    }])
    //删除标签
    const removeTab = (path) => {
        let tabs = tabList.value
        let actTab = activeTab.value

        //如果删除的标签为当前所处的标签页面
        //则将活跃标签优先转移至该标签的后一个标签，如果后面一个标签为空，则取前一个标签
        let nextTab = actTab
        if (actTab === path) {
            tabs.forEach((tab, index) => {
                if (tab.path === actTab) {
                    //找到所处标签下标
                    nextTab = tabs[index + 1] || tabs[index - 1]
                    if (nextTab) {
                        actTab = nextTab
                    }
                }
            })
        }

        //删除标签
        tabList.value = tabList.value.filter((tab) => tab.path !== path)
        activeTab.value = actTab

        //将更新后的数据存入cookie
        setTabList(tabList.value)
        //切换标签页
        tabChange(activeTab.value)
    }

    // 添加 Tab 标签页
    function addTab(tab) {
        // 标签是否不存在
        let isTabNotExisted = tabList.value.findIndex(item => item.path == tab.path) == -1
        // 如果不存在
        if (isTabNotExisted) {
            // 添加标签
            tabList.value.push(tab)
            //缓存到Cookie中
            setTabList(tabList.value)
        }
    }

    //初始话tabList
    function initTabList() {
        let tabs = getTabList()
        if (tabs) {
            //缓存中tabs不为空则更新
            tabList.value = tabs
        }
    }
    //每次刷新页面就初始化一次
    initTabList()

    // 在路由切换前被调用
    onBeforeRouteUpdate((to, from) => {
        // 打印控制台日志
        console.log({
            title: to.meta.title,
            path: to.path
        })

        //设置被激活的tab标签
        activeTab.value = to.path
        //添加到标签栏中
        addTab({
            title: to.meta.title,
            path: to.path
        })
    })
    // 标签页切换事件
    const tabChange = (path) => {
        //设置被激活的标签
        activeTab.value = path
        //路由跳转
        router.push(path)
        console.log(path)
    }

    const handleCloseTab = (command) => {
        //获取首页路由
        let indexPath = '/admin/index'
        if (command === 'closeOthers') {
            //关闭除了首页以及当前活跃页面的tab
            tabList.value = tabList.value.filter((tab) => tab.path === indexPath || tab.path === activeTab.value)
        } else if (command === 'closeAll') {
            //关闭除了首页的tab
            tabList.value = tabList.value.filter((tab) => tab.path === indexPath)
            //将活跃标签切换为首页标签
            activeTab.value = indexPath
        }

        //将更新后的标签缓存
        setTabList(tabList.value)
        //切换到活跃的标签
        tabChange(activeTab.value)
    }

    return {
        menuStore,
        activeTab,
        tabList,
        tabChange,
        removeTab,
        handleCloseTab
    }
}

